<template>
  <div class="index">
    <div class="footer"></div>
    <p>市场人员变化 2022 — 2021</p>
    <echart :option="option"></echart>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["北方", "南方"],
          top: "16%",
          right: "10%",
          textStyle: {
            color: "#4c9bfd",
            fontSize: 14 //字体大小
          }
        },
        grid: {
          top: "30%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        // 保存图片
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          // X轴文字
          axisLabel: {
            show: true,
            textStyle: {
              color: "rgba(255, 255, 255, 0.7)"
            }
          },
          // X轴轴线
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(25, 186, 139, 0.17)"
            }
          }
        },
        yAxis: {
          type: "value",
          // Y轴度量线
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(25, 186, 139, 0.17)"
            }
          },
          axisLine: {
            //Y轴轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "rgba(25, 186, 139, 0.17)",
              width: 1,
              type: "solid"
            }
          },
          // y轴文字的配置
          axisLabel: {
            textStyle: {
              color: "rgba(255, 255, 255, 0.7)" //Y轴内容文字颜色
            }
          }
        },
        series: [
          {
            name: "新增粉丝",
            data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            type: "line",
            // 折线修饰为圆滑
            smooth: true
          },
          {
            name: "新增游客",
            data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
            type: "line",
            smooth: true
          }
        ]
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.index {
  position: relative;
  p {
    width: 100%;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 8px;
    left: 0;
  }
  .leftCentEchart {
    width: 100%;
    height: 100%;
  }
  // 使用伪元素做边框
  .footer {
    &::before {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-left: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    &::after {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-right: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
</style>